<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>iframe</title>
		<script type="text/javascript" src="../../js/jquery-1.11.2.min.js" ></script>
	</head>
	<body>
		<div id="parentDiv">这是父页面</div>
		<input type="button" value="获取" id="get" />
		<input type="button" value="刷新子页面" id="refresh" />
		<input type="button" value="调用子页面页面方法" onclick="callChild()" />
		<iframe id="main_frame" name="iframeName" style="width: 100%;height: 100%;" src="child.html"></iframe>
	</body>
	<script>
		$("#get").click(function(){
			console.log("父点击")
			
			var jschildDiv = document.getElementById('main_frame').contentWindow.document.getElementById('childDiv')
			console.log("jschildDiv:"+jschildDiv.textContent);
			
			var js2childDiv = window.frames["main_frame"].contentDocument.getElementById('childDiv');
			//注意：上面的 .contentDocument 相当于 .contentWindow.document ！
			console.log("js2childDiv:"+js2childDiv.textContent);
			
			var childHtml = $(window.frames["main_frame"].contentWindow.document).find("#childDiv").html()
			console.log("jquery:"+childHtml)
			
			var childHtml = $("#main_frame").contents().find("#childDiv").html();
			console.log("jquery2:"+childHtml)
			
		})
		
		$("#refresh").click(function(){
			//document.getElementById('main_frame').contentWindow.location.reload(true);
			document.getElementById('main_frame').src=document.getElementById('main_frame').src;
		})
		
		function callChild() {
			$("#main_frame")[0].contentWindow.child();
		}
		
		function parent() {
			console.log("父页面方法");
		}
		
	</script>
</html>
